<template>
  <div class="app-container towSearchHeader">
    <div class="customContainer">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right" unlink-panels
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" style="width:240px"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select class="w160" placeholder="选择品牌" v-model="formInline.brand" @change="brandChange">
            <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-select class="w160" filterable placeholder="选择门店" v-model="formInline.store_id">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select class="w160" placeholder="支付类型:" v-model="formInline.pay_way">
            <el-option v-for="item in pay_way" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input class="w160" v-model="formInline.yum_no" placeholder="请输入运管单号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input class="w160" v-model="formInline.a_no" placeholder="请输入支付平台单号"></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>

      <!-- 列表 -->
      <el-table highlight-current-row :data="list" border size="small">
        <el-table-column align="center" label="订单时间" prop="creat_time"></el-table-column>
        <el-table-column align="center" label="运管单号	" prop="order_id"></el-table-column>
        <el-table-column align="center" label="支付平台单号" prop="trade_no"></el-table-column>
        <el-table-column align="center" label="支付方式">
          <template slot-scope="scope">
            {{ (scope.row.trad_stat==1||scope.row.trad_stat==31)?'支付宝':'微信'}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="游玩次数" prop="subject"></el-table-column>
        <el-table-column align="center" label="付款金额" prop="money"></el-table-column>
        <el-table-column align="center" label="系统状态">
          <template slot-scope="scope">
            {{ scope.row.status==6?'游玩成功': scope.row.status==3 ? '支付失败' : scope.row.status==1
                        ?'未支付':'异常单'}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="处理状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status==2||scope.row.status==4||scope.row.status==5">{{
                            scope.row.state==1?'退款成功': scope.row.state==0 ? '退款失败' : '未退款'}}</span>
            <span v-else>正常</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" prop="remark">
          <template slot-scope="scope">
            {{scope.row.remark ?scope.row.remark :'-'}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="editClick(scope.row,scope.$index)">编辑备注
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 区域管理弹框 -->
    <el-dialog :close-on-click-modal="false" title="编辑备注" :visible.sync="remarkDialog">
      <el-input type="textarea" :rows="2" placeholder="请输入备注（30字以内）" :maxlength="30" v-model="saveForm.remark">
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveClick()" size="small"> 保存</el-button>
      </div>
    </el-dialog>
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination>
      <div class="pull-right">
        <el-button style="position:relative;overflow:hidden" type="primary" size="small">
          <span>导入退款回单</span>
          <input style="opacity:0;z-index:999;width:100px;height:32px;position:absolute;top:0;left:0" type="file" ref="importInput" @change="importClick">
        </el-button>
        <el-button type="primary" size="small" @click="exportClick()" :loading="exportLoading">导出退款异常单
          <count-down ref="cd" />
        </el-button>
      </div>
    </div>

  </div>

</template>

<script>
import { getBrandList, getStoreList, getList, getPage, getExport, save } from '@/api/dashboard/order_Inquiry';
import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
import Cookies from 'js-cookie';
import axios from 'axios';

export default {
  data() {
    return {
      exportLoading: false,
      remarkDialog: false,
      pay_way: [
        { id: 1, name: '支付宝' },
        { id: 2, name: '微信' }
      ],
      saveForm: {
        remark: '',
        order_id: ''
      },
      editIndex: '',
      currentPage: 1,
      totalDataNumber: 0,
      brandList: [],
      storeList: [],
      formInline: {
        store_id: '',
        pay_way: 1,
        start_time: '',
        end_time: '',
        a_no: '',
        yum_no: ''
      },
      store_list: [],
      list: null,
      pickerOptions: pickerOptionsF(),
      pickerDate: pickerDateF()
    };
  },
  computed: {
    info() {
      return this.$store.getters.optionId;
    }
  },
  created() {
    this.getBrand();
  },
  methods: {
    //导入功能  在请求头统一设置了data转换成后端需要的字符串，文件上传请求暂时写在VUE文件里
    importClick(e) {
      if (e.target.files[0].name.substring(e.target.files[0].name.length - 3) != 'csv') {
        this.$message({ type: 'error', message: '请选择csv文件上传' });
        return;
      }
      let formData = new FormData();
      formData.append('pay_way', this.formInline.pay_way);
      formData.append('refund_csv', e.target.files[0]);
      let url = `https://${location.host}/smsi/index.php/Statistic_brand_qr/back_refund_csv`;
      let config = {
        headers: { didixueshengka: `${Cookies.get('SMS_AdminToken')}` }
      };
      axios.post(url, formData, config).then(response => {
        this.$message({ type: response.data.code == 1 ? 'success' : 'error', message: response.data.message });
        this.$refs.importInput.value = '';
        if (response.data.code == 1) {
          this.fetchData();
        }
      });
    },
    editClick(row, index) {
      this.saveForm.remark = row.remark ? row.remark : '';
      this.saveForm.order_id = row.order_id;
      this.editIndex = index;
      this.remarkDialog = true;
    },
    saveClick() {
      save(this.saveForm).then(response => {
        this.$message({ type: 'success', message: response.message });
        if (response.code == 1) {
          this.list[this.editIndex].remark = this.saveForm.remark;
          this.remarkDialog = false;
        }
      });
    },
    getBrand() {
      getBrandList({ org: 1, category_id: 308 }).then(response => {
        this.brandList = response;
        this.formInline.brand = response[0].id;
        this.getStore();
      });
    },
    brandChange() {
      this.formInline.store_id = '';
      this.getStore();
    },
    getStore() {
      getStoreList({ brand: this.formInline.brand, category_id: 308 }).then(response => {
        this.storeList = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        }
        if (this.list == null) {
          this.searchClick();
        }
      });
    },
    // 导出
    exportClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.start_time = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
        getExport(this.formInline);
        this.exportLoading = true;
        this.$refs.cd.countDownF(30).then(() => {
          this.exportLoading = false;
        });
      });
    },
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.start_time = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      getPage(this.formInline)
        .then(response => {
          this.totalDataNumber = response.page * 20;
          getList(this.formInline).then(response => {
            this.list = response;
            this.listLoading = false;
          });
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then(response => {
        this.list = response;
        this.listLoading = false;
      });
    }
  }
};
</script>